<template>
  <div id="order">
    <van-cell title="送至" :value="selectAddress" clickable is-link center @click="showAddress=true;" />

    <van-cell title="优惠" :value="selectCoupon" clickable is-link center @click="showCoupon=true;" />

    <van-card
      :num="item.number"
      :price="item.retail_price"
      :title="item.goods_name"
      :thumb="item.list_pic_url"
      v-for="(item,index) in submit.goods" :key="index"
    />

    <van-submit-bar :loading="loading" :price="submit.totalAmount * 100" button-text="提交订单" @submit="onOrderSubmit" />

    <van-action-sheet v-model="showAddress" title="配送至" close-on-click-action @select="showAddress=true;">
      <div class="content">
        <div class="row"  v-for="(item,index) in user.address" :key="index" @click="onClickAddress(item.id)">
          <div class="name"><p>{{item.user_name}}</p></div>
          <div class="text">
            <p>{{item.tel_number}}</p>
            <p style="color: grey">{{`\n${item.province_Name}${item.city_Name}${item.county_Name}${item.detail_Info}`}}</p>
          </div>
          <div class="edit"></div>
        </div>
        <van-button style="margin-top: 10px" icon="plus" type="info">新建</van-button>
      </div>
    </van-action-sheet>
    <van-action-sheet v-model="showCoupon" title="优惠" close-on-click-action @select="coupon_id=item.id">
      <div class="content">
        <div class="row">
          <div class="icon">
            <van-icon name="location-o" />
          </div>
          <div class="text">
            22222222222222222222222222222222222222222
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #order{
    width: 100%;
    height: 100%;
  
  }

  /deep/.content{
    .row{ 
      width: 90%;
      padding:10px 5%;
      width: 100%;
      font-size: 1.4rem;
      display: flex;
      flex-flow: row nowrap;
      border-bottom: 1px solid grey;
      box-sizing: border-box;
      font-size: 0.9rem;
      .name{
        flex: 0 0 auto;
        width: 20%;
        display: table-cell;
        vertical-align: middle;
      }
      .text{
        flex: 0 0 auto;
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: table-cell;
        word-break: break-all;
        vertical-align: middle;
      }
    }
  }
</style>

<script lang="ts">
// @ is an alias to /src
import { 
  Image as VanImage,List,Card,Col, Row,
  Cell, CellGroup,ActionSheet,Icon,Button,
  SubmitBar,Toast
} from 'vant';
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import router from '../router';
import store from '../store/index';
import orderApi from '../api/order.api';
import payApi from '../api/pay.api';

Vue.use(Cell).use(CellGroup).use(ActionSheet).use(Icon).use(Button)
.use(Card).use(SubmitBar).use(Toast);
@Component
export default class OrderComponent extends Vue {
  private showAddress: boolean=false;
  private showCoupon: boolean=false;
  private selectAddress: string = '';
  private selectCoupon: string = '';
  private address_id: number = 0;
  private coupon_id: number = 0;
  private loading: boolean =false;
  private submit: any = {
    totalAmount:0,
    marketAmount:0,
    goods:[]
  };
  private user: any = {}
  async created(){
    store.commit('global/setShowPageLoading',true);
    await store.dispatch('user/getUser');
    this.user=store.getters['user/user'];
    this.submit=store.getters['order/submit'];
    this.address_id=this.user.address[0].id;
    store.commit('global/setShowPageLoading',false);
  }

  private async onOrderSubmit(){
    this.loading=true;
    const address=this.user.address.filter(v => v.id==this.address_id)[0];
    const o={
      consignee:address.user_name,
      country:address.national_Code,
      province:address.province_Name,
      city:address.city_Name,
      district:address.county_Name,
      address:address.detail_Info,
      mobile:address.tel_number,
      actual_price:this.submit.totalAmount,
      order_price:this.submit.totalAmount,
      goods_price:this.submit.marketAmount,
      orderGoods:[]
    };
    this.submit.goods.forEach(v => {
      o.orderGoods.push({
        product_id:v.product_id,
        number:v.number
      });
    });
    let res=await orderApi.addOrder(o);
    this.loading=false;
    if(!res.id){
      Toast.fail('提交订单出错');
      return;
    }
    res=await payApi.alipay(res.id);
    router.currentRoute.meta.navTitle="支付";
    //console.log(res);
    router.push({
      path:'/frame',
      query:{
        frame_src:res.data.url
      }
    });
  }

  private onClickAddress(id){
    this.address_id=id;
    this.showAddress=false;
  }
}
</script>
